<template>
  <a-modal
    :destroy-on-close="true"
    :mask-closable="false"
    title="角色管理"
    :open="visible"
    :onCancel="onCancel"
    :width="800"
  >
    <template #footer>
      <a-button key="back" @click="() => onCancel()">取消</a-button>
      <a-button
        key="submit"
        type="primary"
        :loading="onSubmitLoading"
        @click="onFinish"
        >提交</a-button
      >
    </template>
    <a-form>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="角色编码" v-bind="validateInfos.roleCode">
            <a-input
              v-model:value="modelRef.roleCode"
              placeholder="请输入编码"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="角色名称" v-bind="validateInfos.roleName">
            <a-input
              v-model:value="modelRef.roleName"
              placeholder="请输入名称"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="系统角色">
            <a-switch
              v-model:checked="modelRef.sysStatus"
              checked-children="ON"
              un-checked-children="OFF"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="公共角色">
            <a-switch
              v-model:checked="modelRef.publicStatus"
              checked-children="ON"
              un-checked-children="OFF"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="状态">
            <a-switch
              v-model:checked="modelRef.enableStatus"
              checked-children="ON"
              un-checked-children="OFF"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item label="描述">
            <a-textarea
              placeholder="请输入描述内容..."
              v-model:value="modelRef.remark"
              :rows="4"
              show-count
              :maxlength="100"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script lang="ts">
import { defineComponent, PropType, reactive } from "vue";
import { useI18n } from "vue-i18n";

import { Props, validateInfos } from "ant-design-vue/lib/form/useForm";
import { message, Form } from "ant-design-vue";
const useForm = Form.useForm;

import { TableListItem } from "../data.d";

interface UpdateFormSetupData {
  modelRef: Omit<TableListItem, "id">;
  validateInfos: validateInfos;
  onFinish: () => Promise<void>;
}

export default defineComponent({
  name: "UpdateForm",
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    values: {
      type: Object as PropType<Partial<TableListItem>>,
      required: true,
    },
    onCancel: {
      type: Function,
      required: true,
    },
    onSubmitLoading: {
      type: Boolean,
      required: true,
    },
    onSubmit: {
      type: Function as PropType<(values: TableListItem) => void>,
      required: true,
    },
  },
  setup(props): UpdateFormSetupData {
    const { t } = useI18n();
    // 表单值
    const modelRef = reactive<TableListItem>({
      id: props.values.id || 0,
      roleCode: props.values.roleCode || "",
      roleName: props.values.roleName || "",
      remark: props.values.remark || "",
      sysStatus: props.values.sysStatus === "1" ? true : false,
      publicStatus: props.values.publicStatus === "1" ? true : false,
      enableStatus: props.values.enableStatus === "1" ? true : false,
      appId: props.values.appId || 0,
      updateType: props.values.updateType || "",
    });
    console.log("modelRef", modelRef);
    // 表单验证
    const rulesRef = reactive({
      roleCode: [
        {
          required: true,
          message: "编码不能为空",
        },
      ],
      roleName: [
        {
          required: true,
          message: "名称不能为空",
        },
      ],
    });
    // 获取表单内容
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );
    // 提交
    const onFinish = async () => {
      try {
        const fieldsValue = await validate<TableListItem>();
        modelRef.sysStatus = modelRef.sysStatus ? "1" : "0";
        modelRef.publicStatus = modelRef.publicStatus ? "1" : "0";
        modelRef.enableStatus = modelRef.enableStatus ? "1" : "0";
        modelRef.updateType = "1";
        props.onSubmit(modelRef);
      } catch (error) {
        // console.log('error', error);
        message.warning(t("app.global.form.validatefields.catch"));
      }
    };

    return {
      modelRef,
      validateInfos,
      onFinish,
    };
  },
});
</script>
<style scoped lang="less">
.row-title {
  font-size: 18px;
  margin-bottom: 10px;
}
</style>
